<template>
  <view class="maintain_setting">
    <view class="setting">
      <view class="main">
        <view class="main_item">
          <view class="content">
            <view>保养任务详情允许全选正常</view>
            <view>
              <switch color="#0091ff" :checked="configValue == 1 ? true : false"
                @change="changeSwitch($event,'configValue')" />
            </view>
          </view>

          <view class="tips">
            注：开启后，记录保养工作项时，允许「全选正常」操作。
          </view>
        </view>

        <view class="main_item">
          <view class="content">
            <view>保养任务详情指引标准图片默认收起</view>
            <view>
              <switch color="#0091ff" :checked="pictureDisable == 1 ? true : false"
                @change="changeSwitch($event,'pictureDisable')" />
            </view>
          </view>

          <view class="tips">
            注：开启后，查看保养工作项时，指引图片全部收起。
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { getMaintainSet, setMaintainStatus } from '@/apis/setting.js';
export default {
	computed: {
		...mapState('user', ['userinfo']),
	},
	data() {
		return {
			configValue: 0,
			pictureDisable: 1
		};
	},
	async created() {
		await this.handleRreshToken();
		this.getStatus();
	},
	methods: {
		...mapActions('user', ['handleRreshToken']),
		changeSwitch(e, key) {
			this[key] = e.detail.value == true ? 1 : 0;
			uni.showLoading({
				title: '请求中',
				icon: 'none'
			});
			let obj = { userId: this.userinfo.user_id };
			obj[key] = this[key];
			setMaintainStatus(obj)
				.then(res => {
					if (res) {
						uni.hideLoading();
						this.getStatus();
					}
				});
		},
		getStatus() {
			getMaintainSet({ userId: this.userinfo.user_id })
				.then(res => {
					console.log(res.data, '获取状态');
					this.configValue = res.data.configValue;
					this.pictureDisable = res.data.pictureDisable;
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.maintain_setting {
  background: #f3f6f8;
  height: 100vh;

  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .main_item {
    width: 710rpx;

    .content {
      display: flex;
      justify-content: space-between;
      background: #ffffff;
      padding: 20rpx 28rpx;
      margin: 16rpx 0;
      color: #333;
      border-radius: 8rpx;
      box-sizing: border-box;
      align-items: center;
      font-size: 28rpx;
      switch{
        transform:scale(0.7)
      }
    }

    .tips {
      color: #999;
      font-size: 24rpx;
      margin-left: 14rpx;
    }
  }
}
</style>
